<template>
  <div class="list-item">
    <div class="item-box">
      <div class="item-left"><img :src="genderImg" /></div>
      <div class="z-10">
        <div class="item-right flex items-center">
          <div class="item-title">{{ t('编码') }}</div>
          <a-tooltip v-if="item?.code && item.code.length > 12" :title="item.code">
            <div class="item-form-name"> {{ `${item.code.slice(0, 12)}...` }}</div>
          </a-tooltip>
          <div class="item-form-name" v-else> {{ item?.code || '-' }}</div>
        </div>
        <div class="item-right flex items-center">
          <div class="item-title">{{ t('姓名') }}</div>
          <a-tooltip v-if="item?.name && item.name.length > 8" :title="item.name">
            <div class="item-form-name"> {{ `${item.name.slice(0, 8)}...` }}</div>
          </a-tooltip>
          <div class="item-form-name" v-else> {{ item?.name }}</div>
        </div>
      </div>
      <!-- <div v-if="props.disabled">
        <div class="fixed-checked"> 禁用 </div>
      </div> -->
      <div class="fixed-checked" v-if="hasCheckSlot">
        <slot name="check"></slot>
      </div>
      <div class="fixed-icon">
        <IconFontSymbol icon="user" :fillColor="genderFillColor" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed, useSlots } from 'vue';
  import defaultImg from '/@/assets/workflow/default.png';
  import FemaleImg from '/@/assets/workflow/female.png';
  import MaleImg from '/@/assets/workflow/male.png';
  import IconFontSymbol from '/@/components/IconFontSymbol/Index.vue';
  import { GenderEnum } from '/@/enums/userEnum';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  let props = defineProps({
    item: Object,
    disabled: Boolean,
    isShowTree: {
      type: Boolean,
      default: true,
    },
  });
  const hasCheckSlot = computed(() => {
    return !!useSlots().check;
  });
  const genderImg = computed(() => {
    switch (props.item?.gender) {
      case GenderEnum.FEMALE:
        return FemaleImg;
      case GenderEnum.MALE:
        return MaleImg;
      default:
        return defaultImg;
    }
  });
  const genderFillColor = computed(() => {
    switch (props.item?.gender) {
      case GenderEnum.FEMALE:
        return '#ffedf5';
      case GenderEnum.MALE:
        return '#e9f0fe';
      default:
        return '#f1ecfe';
    }
  });

  let fontcolor = computed(() => {
    switch (props.item?.gender) {
      case GenderEnum.FEMALE:
        return '#ffd1d7';
      case GenderEnum.MALE:
        return '#3c7eff';
      default:
        return '#b389ff';
    }
  });
  let bgcolor = computed(() => {
    switch (props.item?.gender) {
      case GenderEnum.FEMALE:
        return '#fef6fa';
      case GenderEnum.MALE:
        return '#f3f8ff';
      default:
        return '#f5f1fd';
    }
  });

  const itemleftwidth = computed(() => {
    return props.isShowTree ? '30%' : '25%';
  });
</script>

<style lang="less" scoped>
  .list-item {
    width: 30%;
    background: v-bind(bgcolor);
    border-color: transparent;
    border-radius: 8px;
    margin-left: 20px;
    margin-bottom: 20px;
    overflow: hidden;

    &:hover {
      border: 1px dotted v-bind(fontcolor);
    }

    .item-box {
      display: flex;
      margin: 14px;
      position: relative;

      .item-left {
        width: v-bind(itemleftwidth);
        margin-right: 14px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .item-right {
        .item-title {
          font-size: 12px;
          font-weight: bold;
          color: #999;
          margin: 10px 10px 4px 0;
          opacity: 0.8;
        }

        .item-form-name {
          color: #303133;
          font-size: 14px;
          font-weight: bold;
          margin: 8px 0 4px;
          opacity: 0.8;
        }
      }

      .fixed-checked {
        position: absolute;
        bottom: -4px;
        z-index: 1;
        right: -6px;
      }

      .fixed-icon {
        position: absolute;
        right: -24px;
        font-size: 70px;
        transform: rotate(48deg);
        top: -24px;
        z-index: 0;
      }
    }
  }

  :deep(.ant-checkbox-inner) {
    border-color: v-bind(fontcolor);
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    background-color: v-bind(fontcolor);
    border-color: v-bind(fontcolor);
  }

  :deep(.ant-checkbox-checked::after),
  :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover),
  :deep(.ant-checkbox-inner),
  :deep(.ant-checkbox:hover),
  :deep(.ant-checkbox-input:focus + .ant-checkbox-inner) {
    border-color: v-bind(fontcolor);
  }

  .picked {
    border-width: 1px;
    border-style: dotted;
    border-color: v-bind(fontcolor);
  }

  .not-picked {
    border-width: 1px;
    border-style: dotted;
  }
</style>
